<template>
  <div>
    <Carouselfigure :bannerlist="bannerlist" />
    <Recommendedsonglist />
    <ExclusiveentryList />
    <Recommendnewmusic />
    <mvlistruko />
  </div>
</template> 

<script>
import Carouselfigure from '@/components/Home/Carouselfigure.vue'
import Recommendedsonglist from '@/components/Home/Recommendedsonglist.vue'
import ExclusiveentryList from '@/components/Home/ExclusiveentryList.vue'
import Recommendnewmusic from '@/components/Home/Recommendnewmusic.vue'
import mvlistruko from '@/components/Home/mvlistruko.vue'
import { mapState } from 'vuex'
export default {
  name: 'Recommend',
  components: { Carouselfigure, Recommendedsonglist, ExclusiveentryList, Recommendnewmusic, mvlistruko },
  computed: {
    ...mapState({
      //从vuex获取到轮播图的数据
      bannerlist: state => state.Home.bannerlist
    })
  },
  mounted() {
    //组件一加载就获取调用轮播接口
    this.getBannerList()
  },
  methods: {
    //获取轮播图
    getBannerList() {
      this.$store.dispatch('getBannerList')
    }
  }
}
</script>

<style lang="less" scoped>
</style>